<template>
    <el-divider>标签页</el-divider>

    <el-form :model="propJson" label-width="auto" style="width: 100%">
        <el-form-item label="是否为动态标签">
            <el-radio-group v-model="propJson.isDynamic">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
            </el-radio-group>
        </el-form-item>
    </el-form>

    <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;" v-if="!propJson.isDynamic">
        <el-button type="primary" class="addCollapse" size="small" @click="addTabs()">添加标签页</el-button>
    </div>

    <el-collapse v-if="!propJson.isDynamic">
        <el-collapse-item :name="index" v-for="(item, index) in propJson.tabsInfoList">
            <template #title>
                <div class="collapseTitle">
                    <span>标签 {{(index + 1)}}</span>
                    <el-button type="danger" plain size="small" style="margin-left: 20px" @click.stop="deleteTab(index)">删除</el-button>
                </div>
            </template>
            <el-divider>标签标题</el-divider>

            <CommonThirdServiceValue :actionInfo="item.labelInfo ? item.labelInfo : {}" :commonParam="commonParam" />
        </el-collapse-item>
    </el-collapse>

    <div v-if="propJson.isDynamic">
        <el-divider>标签页名称列表</el-divider>
        <CommonThirdServiceValue :actionInfo="propJson.dynamicLabelInfo ? propJson.dynamicLabelInfo : {}" :commonParam="commonParam" />
    </div>
</template>

<script>
import CommonThirdServiceValue from "@/components/lowcode/service/CommonThirdServiceValue";

export default {
    name: "TabsDrawer",
    props: ['commonParam'],
    components: {
        CommonThirdServiceValue
    },
    computed: {
        propJson() {
            return this.$store.state.lowCodeDrawerJsonInfo;
        }
    },
    methods: {
        addTabs() {
            let obj = {
                labelInfo: {optionValueType: "custom", optionsCustom: "span字体", optionsCustomValueType: "String", optionsVariableParam: "",
                    apiType: "MSOA", apiPath: "", apiMethod: "GET", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                    isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []},
                labelContentComponentList: [
                    {
                        name: "普通SPAN", title: "SPAN文字编辑", component: "SpanComponent", drawerComponent: "SpanDrawer", sourceId: 32,
                        propJson: {type: "custom", customInfo: "span字体", variableName: "", apiPath: "",
                            actionInfo: {optionValueType: "custom", optionsCustom: "span字体", optionsCustomValueType: "String", optionsVariableParam: "",
                                apiType: "MSOA", apiPath: "", apiMethod: "GET", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                                isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}
                        }
                    }
                ]
            }
            this.propJson.tabsInfoList.push(obj);
        },
        deleteTab(index) {
            // 删除数组中的数据
            this.propJson.tabsInfoList.splice(index, 1);
        },
    }
}
</script>

<style scoped lang="less">

</style>